import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import { Form, Card, Table, Input, Divider, Button } from 'antd';
import ShowCusMediaMsgModal from '../../components/ShowCusMediaMsgModal';
import SendCusTextMsgModal from '../../components/SendCusTextMsgModal';
import SendImgUrlMsgModal from '../../components/SendImgUrlMsgModal';
import styles from './styles.less';

const FormItem = Form.Item;

@connect(({ customer_message, loading }) => ({
  customer_message,
  loading: loading.models.customer_message,
}))
@Form.create()
export default class CustomerMessage extends PureComponent {
  state = {
    appid: '',
    mediaMsgModalVisible: false,
    textMsgModalVisible: false,
    ImgUrlMsgModalVisible: false,
  };

  // 开始获取公众号列表
  componentDidMount() {
    this.props.dispatch({
      type: 'customer_message/fetchAuthorizerList',
    });
  }

  // 授权公众号
  addGH = () => {
    this.props.dispatch({
      type: 'customer_message/addGH',
    });
  };

  // 模糊搜索
  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        dispatch({
          type: 'customer_message/fetchAuthorizer',
          payload: values['keyword'],
        });
      }
    });
  };

  // 跳转素材消息列表页面
  gotoMediaMessage = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: '/media_message',
      })
    );
  };

  // 显示素材消息处理
  showMediaMsgModal = appid => {
    this.props.dispatch({
      type: 'customer_message/cleanMediaList',
    });
    // 设置配置模板modal可见
    this.setState({
      appid: appid,
      mediaMsgModalVisible: true,
    });
  };
  // 素材消息处理成功回调
  handleMediaMsgOk = (v) => {
    var { appid, media_id, media_type, send_type, test_openid, send_date } = v;
    if (media_type == 'news') {
      media_type = 'mpnews';
    }
    if (media_type == 'video') {
      media_type = 'mpvideo';
    }
    this.props.dispatch({
      type: 'customer_message/createMediaMsgSchedule',
      payload: {
        appid: appid,
        media_id: media_id,
        media_type: media_type,
        send_type: send_type,
        test_openid: test_openid ? test_openid : '',
        send_date: send_date ? moment(send_date).unix() : '',
      },
    });
  }
  // 显示素材消息处理取消回调
  handleMediaMsgCancel = () => {
    // 设置modal不可见
    this.setState({
      mediaMsgModalVisible: false,
    });
  };

  // 发送文本消息处理
  showTextMsgModal = appid => {
    // 设置配置模板modal可见
    this.setState({
      appid: appid,
      textMsgModalVisible: true,
    });
  };
  // 发送文本消息处理成功回调
  handleTextMsgOk = v => {
    const { appid, text, send_type, test_openid, send_date } = v;
    this.props.dispatch({
      type: 'customer_message/createTextMsgSchedule',
      payload: {
        appid: appid,
        text: text,
        send_type: send_type,
        test_openid: test_openid ? test_openid : '',
        send_date: send_date ? moment(send_date).unix() : '',
      },
    });
    this.setState({
      textMsgModalVisible: false,
    });
  };
  // 发送文本消息处理取消回调
  handleTextMsgCancel = () => {
    // 设置modal不可见
    this.setState({
      textMsgModalVisible: false,
    });
  };

  // 发送图文链接消息处理
  showImgUrlMsgModal = appid => {
    // 设置配置模板modal可见
    this.setState({
      appid: appid,
      ImgUrlMsgModalVisible: true,
    });
  };
  // 发送图文链接消息处理成功回调
  handleImgUrlMsgOk = v => {
    const { appid, items, send_type, test_openid, send_date } = v;
    this.props.dispatch({
      type: 'customer_message/createImgUrlMsgSchedule',
      payload: {
        appid: appid,
        items: items,
        send_type: send_type,
        test_openid: test_openid ? test_openid : '',
        send_date: send_date ? moment(send_date).unix() : '',
      },
    });
    this.setState({
      ImgUrlMsgModalVisible: false,
    });
  };
  // 发送图文链接消息处理取消回调
  handleImgUrlMsgCancel = () => {
    // 设置modal不可见
    this.setState({
      ImgUrlMsgModalVisible: false,
    });
  };

  // 获取素材列表
  getMediaList = (appid, type = 'news', page = 1) => {
    this.props.dispatch({
      type: 'customer_message/fetchMediaList',
      payload: {
        appid: appid,
        type: type,
        page: page,
      },
    });
  };

  // 跳转任务状态页面
  showSchedules = () => {
    this.props.dispatch(
      routerRedux.push({
        pathname: '/customer_schedule',
      })
    );
  };

  render() {
    const {
      appid,
      mediaMsgModalVisible,
      textMsgModalVisible,
      ImgUrlMsgModalVisible,
    } = this.state;

    const {
      form: { getFieldDecorator },
      customer_message: { authorizerList, mediaList },
      loading,
    } = this.props;

    const btnSet = {
      size: 'small',
      type: 'primary',
    };

    const columns = [
      {
        title: 'Id',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '微信账号',
        dataIndex: 'ghid',
        key: 'ghid',
      },
      {
        title: '微信名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'AppId',
        dataIndex: 'appid',
        key: 'appid',
      },
      {
        title: '客服消息操作',
        dataIndex: 'operation',
        key: 'operation',
        render: (text, record) => (
          <Fragment>
            <Button {...btnSet} onClick={() => this.showMediaMsgModal(record.appid)}>
              发送素材消息
            </Button>
            <Divider type="vertical" />
            <Button {...btnSet} onClick={() => this.showTextMsgModal(record.appid)}>
              发送普通消息
            </Button>
            <Divider type="vertical" />
            <Button {...btnSet} onClick={() => this.showImgUrlMsgModal(record.appid)}>
              发送图文链接消息
            </Button>
          </Fragment>
        ),
      },
    ];

    return (
      <div>
        <div>
          <Form className={styles.searchLabel} onSubmit={this.handleSearch} layout="inline">
            <FormItem label="搜索: ">
              {getFieldDecorator('keyword')(
                <Input placeholder="请输入完整公众号名称" style={{ width: 300 }} />
              )}
            </FormItem>
            <Button style={{ marginTop: 4 }} type="primary" htmlType="submit">
              查询
            </Button>
          </Form>
          <div className={styles.right_btn}>
            <Button onClick={this.showSchedules} type="primary">
              定时任务列表
            </Button>
            <Button className={styles.addGH} onClick={this.addGH} type="primary">
              授权公众号
            </Button>
          </div>
        </div>
        <br />
        <Card style={{ marginTop: 40 }} bordered={false}>
          <div>
            <Table
              rowKey="appid"
              loading={loading}
              dataSource={authorizerList}
              bordered
              columns={columns}
            />
          </div>
        </Card>
        <ShowCusMediaMsgModal
          visible={mediaMsgModalVisible}
          appid={appid}
          loading={loading}
          onOk={this.handleMediaMsgOk}
          onCancel={this.handleMediaMsgCancel}
          getMediaList={this.getMediaList}
          mediaList={mediaList}
        />
        <SendCusTextMsgModal
          visible={textMsgModalVisible}
          appid={appid}
          loading={loading}
          onOk={this.handleTextMsgOk}
          onCancel={this.handleTextMsgCancel}
        />
        <SendImgUrlMsgModal
          visible={ImgUrlMsgModalVisible}
          appid={appid}
          loading={loading}
          onOk={this.handleImgUrlMsgOk}
          onCancel={this.handleImgUrlMsgCancel}
        />
      </div>
    );
  }
}
